<template>
	<div class="program-wraper">
		<div class="nav-head"><router-link to="/radBoa"><img src="../../../../assets/icon-return45.png"></router-link><div class="title">节目排行</div></div>
		<div class="top-blank"></div>
		<div class="program-list">
			<div class="procont">
				<div class="img"><img src="../../../../assets/1180.png"></div>
				<div class="proinfo">
					<p class="proname">嬉笑笑</p>
					<p class="hot-fans">热度 <span class="hot-count">1</span>万，粉丝数 <span class="fans-count">32</span>万</p>
				</div>
				<div class="guanzhu">+关注</div>
			</div>
			<div class="procont">
				<div class="img"><img src="../../../../assets/2180.png"></div>
				<div class="proinfo">
					<p class="proname">小小花</p>
					<p class="hot-fans">热度 <span class="hot-count">1</span>万，粉丝数 <span class="fans-count">24</span>万</p>
				</div>
				<div class="yiguanzhu">已关注</div>
			</div>
			<div class="procont">
				<div class="img"><img src="../../../../assets/3180.png"></div>
				<div class="proinfo">
					<p class="proname">王力宏</p>
					<p class="hot-fans">热度 <span class="hot-count">0.6</span>万，粉丝数 <span class="fans-count">3</span>万</p>
				</div>
				<div class="guanzhu">+关注</div>
			</div>
			<div class="procont">
				<div class="img"><img src="../../../../assets/4180.png"></div>
				<div class="proinfo">
					<p class="proname">邓紫棋</p>
					<p class="hot-fans">热度 <span class="hot-count">1</span>万，粉丝数 <span class="fans-count">21</span>万</p>
				</div>
				<div class="guanzhu">+关注</div>
			</div>
			<div class="procont">
				<div class="img"><img src="../../../../assets/5180.png"></div>
				<div class="proinfo">
					<p class="proname">哇哈哈</p>
					<p class="hot-fans">热度 <span class="hot-count">0.5</span>万，粉丝数 <span class="fans-count">20</span>万</p>
				</div>
				<div class="guanzhu">+关注</div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
import musicPlayer from '../../../../components/music_player'
	export default {
		name:"programBoader",
		data(){
			return{

			}
		},
		components:{
			musicPlayer
		}
	}
</script>
<style scoped lang="less">
.blank{
	width: 100%;
	height: 108 / 100rem;
}
.top-blank{
	width: 100%;
	height: 88 / 100rem;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}
.program-list{
	width: 100%;
	padding-top: 32 / 100rem;
	.procont{
		margin-left: 20 / 100rem;
		overflow: hidden;
		position: relative;
		margin-bottom: 24 / 100rem;
		div{
			float: left;
		}
		.img{
			width: 180 / 100rem;
			height: 180 / 100rem;
			img{
				width: 100%;
			}
		}
		.proinfo{
			margin-left: 15 / 100rem;
			font-size: 24 / 100rem;
			.proname{
				padding-top: 60 / 100rem;
			}
			.hot-fans{
				padding-top: 40 / 100rem;
			}
		}
		.guanzhu{
			position: absolute;
			right: 20 / 100rem;
			top:49 / 100rem;
			width: 106 / 100rem;
			height: 43 / 100rem;
			border: 2 / 100rem solid #333;
			border-radius: 18 / 100rem;
			text-align: center;
			line-height: 43 / 100rem;
			font-size: 18 / 100rem;
		}
		.yiguanzhu{
			position: absolute;
			right: 20 / 100rem;
			top:49 / 100rem;
			width: 106 / 100rem;
			height: 43 / 100rem;
			border: 2 / 100rem solid #c995f5;
			border-radius: 18 / 100rem;
			text-align: center;
			line-height: 43 / 100rem;
			color: #c995f5;
			font-size: 18 / 100rem;
		}

	}
}		
</style>